<!--
 * @Author: byron
 * @Date: 2021-09-26 10:44:03
 * @LastEditTime: 2021-10-06 12:17:34
-->
<template>
    <div class="mv-card" @click="toMvPage">
        <div class="img-warp">
            <div class="play-count">
                <Icon type="play_fill" />
                <span>{{ playCount }}</span>
            </div>
            <img v-lazy="$utils.genImgURL(img, 500, 260)" alt="" />
            <div class="play-icon-warp">
                <PlayIcon />
            </div>
        </div>
        <p class="name" v-if="name">{{ name }}</p>
        <p class="author" v-if="name">{{ author }}</p>
    </div>
</template>

<script>
export default {
    components: {},
    props: ['id', 'img', 'name', 'author', 'playCount'],
    data() {
        return {}
    },
    watch: {},
    computed: {},
    methods: {
        toMvPage() {
            if (this.id) {
                this.$router.push(`/mv/${this.id}`).catch()
            }
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.mv-card {
    min-width: 140px;
    cursor: pointer;

    .img-warp {
        position: relative;
        padding-top: 56%;
        .play-count {
            position: absolute;
            top: 2px;
            right: 2px;
            z-index: 9;
            color: #fff;
            span {
                margin-left: 4px;
            }
        }
        img {
            @include abs-stretch;
            border-radius: 4px;
            width: 100%;
            height: 100%;
        }
        .play-icon-warp {
            opacity: 0;
            position: absolute;
            bottom: 50%;
            right: 50%;
            transform: translateX(50%) translateY(50%);
            transition: all 0.5s;
        }
        &:hover {
            .play-icon-warp {
                opacity: 1;
            }
        }
    }

    .name {
        @include text-ellipsis;
        margin: 4px 0;
        font-size: 14px;
    }
    .author {
        color: #cbcbd2;
        font-size: 14px;
    }
}
</style>
